<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星巴克</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2449459_af23o586cft.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

</head>

<body>
    <div class="container-fluid">
        <div class="row justify-content-end">
            <div class=" col-lg-4 potition-fixed border-right leftContent">
                <header class="navbar px-0 px-lg-3 py-3 py-lg-4 d-none d-sm-flex">
                    <a href="#" class="navbar-brank">
                        <img src="image/logo.svg" style="width: 36px;" alt="">
                    </a>
                    <ul class="nav mr-auto ml-3">
                        <li class="nav-item"><a href="#" class="nav-link text-dark font-weight-bold">门店</a></li>
                        <li class="nav-item"><a href="#" class="nav-link text-dark font-weight-bold">我的账户</a></li>
                        <li class="nav-item"><a href="#" class="nav-link text-dark font-weight-bold">菜单</a></li>
                    </ul>
                    <span class="iconfont icon-ziyuan d-block" id="showBtn"></span>
                </header>
                <!-- 登录注册 -->
                <div class="d-flex align-items-center login ">
                    <div class="px-0 px-lg-5">
                        <h1 class="font-weight-bold py-3 ">心情惬意，来杯咖啡吧 ☕</h1>
                        <div class="d-none d-sm-block my-3">
                            <a href="#" class="text-success ">
                                <span class="iconfont icon-denglu"></span>
                                <span>登录</span>
                            </a>
                            <a href="#" class="btn btn-outline-success ml-4 register">注册</a>
                        </div>
                    </div>
                </div>
                <!-- 菜单 -->
                <div class="d-none d-sm-flex  bg-white flex-column justify-content-between  menu hide">
                    <header class="navbar px-0 px-lg-3 py-3 py-lg-4">
                        <a href="#" class="navbar-brank">
                            <img src="image/logo.svg" style="width: 36px;" alt="">
                        </a>
                        <span class="iconfont icon-guanbi mr-2" id="closeBtn"></span>
                    </header>
                    <div class="list">
                        <ul class="list-unstyled mx-sm-5 pl-sm-5">
                            <li><a href="#" class="py-2 d-block">门店</a></li>
                            <li><a href="#" class="py-2 d-block">星享俱乐部</a></li>
                            <li><a href="#" class="py-2 d-block">菜单</a></li>
                            <hr>
                            <li><a href="#" class="py-2 d-block">星巴克移动应用</a></li>
                            <li><a href="#" class="py-2 d-block">星礼卡</a></li>
                            <li><a href="#" class="py-2 d-block">星巴克z臻选</a></li>
                            <li><a href="#" class="py-2 d-block">啡快~在线点 到店取</a></li>
                            <li><a href="#" class="py-2 d-block">转星送</a></li>
                            <li><a href="#" class="py-2 d-block">咖啡星讲堂</a></li>
                            <li><a href="#" class="py-2 d-block">上海烘焙工坊</a></li>
                            <li><a href="#" class="py-2 d-block">关于星巴克</a></li>
                            <li><a href="#" class="py-2 d-block">帮助中心</a></li>
                            <hr>
                        </ul>
                        <div class="my-4 mx-sm-5 pl-sm-5">
                            <a href="#" class="text-success">
                                <span class="iconfont icon-denglu"></span>
                                <span class="menu-login">登录</span>
                            </a>
                            <a href="#" class="btn btn-outline-success ml-4 register">注册</a>
                        </div>
                    </div>

                    <footer class="mx-sm-5 pl-sm-5 pb-5">
                        <a href="#">English</a> |
                        <a href="#">隐私政策</a> |
                        <a href="#">使用条款</a>
                    </footer>
                </div>
            </div>
            <div class=" col-lg-8 bg-light">
                <!-- 轮播图 -->
                <div class="row ">
                    <div class="carousel slide" data-ride="carousel" id="pic">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="./image/kv1.jpg" class="img-fluid" alt="">
                            </div>
                            <div class="carousel-item">
                                <img src="./image/kv2.jpg" class="img-fluid" alt="">
                            </div>
                            <div class="carousel-item">
                                <img src="./image/kv3.jpg" class="img-fluid" alt="">
                            </div>
                            <div class="carousel-item">
                                <img src="./image/kv4.jpg" class="img-fluid" alt="">
                            </div>
                        </div>
                        <!-- 控制器 -->
                        <a class="carousel-control-prev" href="#pic" data-slide="prev">
                            <span class="iconfont icon-jiantou "></span>
                        </a>
                        <a class="carousel-control-next" href="#pic" data-slide="next">
                            <span class="iconfont icon-arrow-right-copy-copy-copy "></span>
                        </a>
                        <!-- 指示器 -->
                        <ol class="carousel-indicators">
                            <li data-target="#pic" data-slide-to="0" class="active"></li>
                            <li data-target="#pic" data-slide-to="1"></li>
                            <li data-target="#pic" data-slide-to="2"></li>
                            <li data-target="#pic" data-slide-to="3"></li>
                        </ol>
                    </div>
                </div>
                <div class="row  py-3 py-sm-5">
                    <div class="col-sm-4 my-3 my-sm-0">
                        <a href="#">
                            <img src="./image/img_01.jpg" class="img-fluid rounded" alt="">
                        </a>
                    </div>
                    <div class="col-sm-4 my-3 my-sm-0">
                        <a href="#">
                            <img src="./image/img_02.jpg" class="img-fluid rounded" alt="">
                        </a>
                    </div>
                    <div class="col-sm-4 my-3 my-sm-0">
                        <a href="#">
                            <img src="./image/img_03.jpg" class="img-fluid rounded" alt="">
                        </a>
                    </div>
                </div>
                <!-- 星享俱乐部 -->
                <div class="row club bg-white px-3 py-5 text-center text-sm-left align-items-center">
                    <div class="wrapper d-flex align-items-center">
                        <div class="col-sm-5">
                            <h2>星享俱乐部</h2>
                            <p class="my-4">
                                开启您的星享之旅，星星越多、会员等级越高、好礼越丰富。
                                <a href="#">了解更多 ›</a>
                            </p>
                            <div>
                                <button class="btn btn-outline-success">注册</button>
                                <button class="btn btn-outline-success">登录</button>
                            </div>
                        </div>
                        <div class="col text-sm-right">
                            <img src="./image/logo-msr-new.svg" class="img-fluid" alt="">
                        </div>
                    </div>
                </div>
                <!-- 星巴克精选 -->
                <div class="row pb-5  betters">
                    <div class="col-12 py-5 text-center">
                        <h2>星巴克精选</h2>
                        <p class="my-4 ">在星巴克天猫旗舰店发现更多咖啡心意</p>
                    </div>
                    <div class="col-12">
                        <ul class="row wrapper list-unstyled justify-content-between text-center">
                            <li class="col-6 col-md-3">
                                <a href="#" class="py-3 w-60 bg-white d-inline-block">
                                    <img src="./image/tmall-card-01.png" class="img-fluid" alt="">
                                    <h3 class="text-dark font-weight-bold">会员星礼包</h3>
                                    <p class="py-2">
                                        星享卡新升级
                                        <br>
                                        更多心意好礼
                                        <br>
                                        <span class="pt-4 d-inline-block">了解更多 ></span>
                                    </p>
                                </a>
                            </li>
                            <li class="col-6 col-md-3">
                                <a href="#" class="py-3 w-60 bg-white d-inline-block">
                                    <img src="./image/tmall-card-02.png" class="img-fluid" alt="">
                                    <h3 class="text-dark font-weight-bold">星礼卡</h3>
                                    <p class="py-2">
                                        用一份心礼
                                        <br>
                                        让心意相随
                                        <br>
                                        <span class="pt-4 d-inline-block">了解更多 ></span>
                                    </p>
                                </a>
                            </li>
                            <li class="col-6 col-md-3">
                                <a href="#" class="py-3 w-60 bg-white d-inline-block">
                                    <img src="./image/tmall-card-03.png" class="img-fluid" alt="">
                                    <h3 class="text-dark font-weight-bold">电子产品券</h3>
                                    <p class="py-2">
                                        心意
                                        <br>
                                        从这一杯开始
                                        <br>
                                        <span class="pt-4 d-inline-block">了解更多 ></span>
                                    </p>
                                </a>
                            </li>
                            <li class="col-6 col-md-3">
                                <a href="#" class="py-3 w-60 bg-white d-inline-block">
                                    <img src="./image/tmall-card-04.png" class="img-fluid" alt="">
                                    <h3 class="text-dark font-weight-bold">咖啡生活</h3>
                                    <p class="py-2">
                                        星巴克
                                        <br>
                                        用心制作
                                        <br>
                                        <span class="pt-4 d-inline-block">了解更多 ></span>
                                    </p>
                                </a>
                            </li>

                        </ul>
                    </div>

                </div>
                <!-- 咖啡星讲堂 -->
                <div class="row thea bg-white ">
                    <div class="col-12  py-5 text-center">
                        <h2>1912 派克街 | 咖啡星讲堂</h2>
                        <p class="my-4 ">了解更多星巴克咖啡文化</p>
                    </div>
                    <div class="col-12 scroll">
                        <ul class="row  pl-5  list-unstyled justify-content-around">
                            <li class="card mx-1 my-3">
                                <a href="#">
                                    <img src="./image/scroll_img_01.jpg" class="card-img-top" alt="">
                                </a>
                                <p class="pt-4 pb-3 px-4">
                                    咖啡的起源与培养
                                </p>
                                <span class="py-2 px-4 d-inline-block position-absolute">咖啡知识</span>
                            </li>
                            <li class="card mx-1 my-3">
                                <a href="#">
                                    <img src="./image/scroll_img_02.jpg" class="card-img-top" alt="">
                                </a>
                                <p class="pt-4 pb-3 px-4">
                                    咖啡调制
                                </p>
                                <span class="py-2 px-4 d-inline-block position-absolute">咖啡品鉴</span>
                            </li>
                            <li class="card mx-1 my-3">
                                <a href="#">
                                    <img src="./image/scroll_img_03.jpg" class="card-img-top" alt="">
                                </a>
                                <p class="pt-4 pb-3 px-4">
                                    咖啡烘焙
                                </p>
                                <span class="py-2 px-4 d-inline-block position-absolute">咖啡知识</span>
                            </li>
                            <li class="card mx-1 my-3">
                                <a href="#">
                                    <img src="./image/scroll_img_04.jpg" class="card-img-top" alt="">
                                </a>
                                <p class="pt-4 pb-3 px-4">
                                    手冲咖啡
                                </p>
                                <span class="py-2 px-4 d-inline-block position-absolute">咖啡品鉴</span>
                            </li>
                        </ul>
                        <span class="iconfont icon-jiantou leftBtn"></span>
                        <span class="iconfont icon-arrow-right-copy-copy-copy rightBtn"></span>
                    </div>

                    <div class="col-12 text-center py-4  fill">
                        <a href="#">沪公网安备 31010402000253号</a> |
                        <a href="#">沪ICP备17003747号</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部菜单栏 -->
    <div class="fixed-bottom baseMenu bg-white  d-sm-none border-top">
        <ul class="row d-flex flex-nowrap list-unstyled justify-content-between px-5">
            <li class="py-1 px-3 text-center">
                <a href="#" class=" active">
                    <span class="iconfont icon-zhuye d-block"></span>
                    主页
                </a>
            </li>
            <li class="py-1 px-3 text-center">
                <a href="#" class="text-">
                    <span class="iconfont icon-mendian d-block"></span>
                    门店
                </a>
            </li>
            <li class="py-1 px-3 text-center">
                <a href="#" class="">
                    <span class="iconfont icon-weibiaoti5 d-block"></span>
                    我的账户
                </a>
            </li>
            <li class="py-1 px-3 text-center">
                <a href="#" class="">
                    <span class="iconfont icon-13wangluoanquan_caidan d-block"></span>
                    菜单
                </a>
            </li>
            <li class="py-1 px-3 text-center">
                <a href="#" class="">
                    <span class="iconfont icon-more d-block"></span>
                    更多
                </a>
            </li>
        </ul>
    </div>


    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script>
        // 顶部菜单栏点击事件
        $('#showBtn').on('click', function () {
            $('.menu').addClass('show').removeClass('hide');
            showMenu();
        })
        $('#closeBtn').on('click', function () {
            $('.menu').addClass('hide').removeClass('show');
            showMenu();
        })
        // 当窗口变化的时候触发事件
        $(window).resize(showMenu);
        function showMenu() {
            if ($(window).innerWidth() <= 992 && $('.menu').hasClass('show')) {
                $('body').css('overflow', 'hidden');
            } else {
                $('body').css('overflow', 'auto');
            }
        }

        // 底部菜单栏
        $('.baseMenu').find('a').on('click', function () {
            $('.baseMenu a').removeClass('active');
            $(this).addClass('active');

        })

        // 咖啡星讲堂 滑动事件
        var cardWidth = $('.scroll ul li').innerWidth();
        var oUl = document.querySelector('.scroll ul');
        var scrollLeft = $('.scroll').position().left;
        var ln = 0;

        showScroll();
        // 左侧按钮是否显示
        function showScroll() {
            if (ln == 0) {
                $('.scroll .leftBtn').css({
                    display: 'none'
                })
            } else if (ln > 0) {
                $('.scroll .leftBtn').css({
                    display: 'block'
                })
                console.log(111)
            }

            if ($(window).innerWidth() < 540) {
                if (ln == 3) {
                    $('.scroll .rightBtn').css({
                        display: 'none'
                    })
                    console.log(666)
                } else if (ln >= 0) {
                    $('.scroll .rightBtn').css({
                        display: 'block'
                    })
                    console.log(111);
                }
            } else {
                if (ln == 2) {
                    $('.scroll .rightBtn').css({
                        display: 'none'
                    })
                } else if (ln >= 0) {
                    $('.scroll .rightBtn').css({
                        display: 'block'
                    })
                    console.log(111)
                }
            }
        }

        $('.scroll')
            .find('.leftBtn').click(function () {
                ln--;
                if (ln < 0) {
                    ln = 0;
                } else if (ln == 1 || ln == 2) {
                    ln = -1;
                }
                $('.scroll ul').css({
                    transform: 'translateX(' + ln * cardWidth + 'px' + ')'
                })
                console.log(ln);
                showScroll();
            })
        $('.scroll')
            .find('.rightBtn').click(function () {
                ln++;
                if ($(window).innerWidth() >= 540) {
                    if (ln > 2) {
                        ln = 2;
                    }
                } else{
                    if (ln > 3) {
                        ln = 3;
                    }
                }
                $('.scroll ul').css({
                    transform: 'translateX(' + - ln * cardWidth + 'px' + ')'
                })
                console.log(ln);
                showScroll();
                console.log()
            })

    </script>
</body>

</html>